<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center px-5">
    <div class="d-flex justify-content-center mb-0 p-0">
      <div class="mb-0 mx-0 p-3 btn-read w-100">
        @if (service.values.PositionState === 2) { @if (service.values.CurrentPosition === 0) { {{
        'accessories.control.closed' | translate }} } @else { {{ 'accessories.control.open' | translate }} {{
        this.service.getCharacteristic('CurrentPosition').value }}% } } @else if (service.values.PositionState === 1) {
        {{ 'accessories.control.opening' | translate }}... } @else if (service.values.PositionState === 0) { {{
        'accessories.control.closing' | translate }}... }
      </div>
    </div>
    <h6 class="mt-4">{{ 'accessories.control.target' | translate }}: {{ targetPosition.value }}%</h6>
    <nouislider
      [min]="targetPosition.min"
      [max]="targetPosition.max"
      [step]="targetPosition.step"
      [(ngModel)]="targetPosition.value"
      (ngModelChange)="onTargetPositionChange()"
      class="mb-1"
    />
    <div class="d-flex justify-content-between align-items-center mt-0 mb-1">
      <span class="grey-text small">{{ 'accessories.control.closed' | translate }}</span>
      <span class="grey-text small">{{ 'accessories.control.open' | translate }}</span>
    </div>
    <h6 class="mt-4">
      {{ 'accessories.control.current' | translate }}: {{ this.service.getCharacteristic('CurrentPosition').value }}%
    </h6>
    <nouislider
      [min]="0"
      [max]="100"
      [step]="1"
      [disabled]="true"
      [(ngModel)]="this.service.getCharacteristic('CurrentPosition').value"
      class="mb-1"
    />
    <div class="d-flex justify-content-between align-items-center mt-0 mb-1">
      <span class="grey-text small">{{ 'accessories.control.closed' | translate }}</span>
      <span class="grey-text small">{{ 'accessories.control.open' | translate }}</span>
    </div>
  </div>
  <div class="modal-footer"></div>
</div>
